/**
* ============================================
* @author:syf20020816@outlook.com
* @since:20230907
* @version:0.0.1
* @type:interface
* @description:
* # SStar
* SStar is a scoring component
* ## properties
* - in property <bool> no-theme : use Surrealism Theme or not
* - in property <float> score : the real score
* - in property <Themes> theme : Themes.Primary;
* - in property <bool> disabled : can be scored if disabled is false
* - in property <float> max-score : max score (how many stars you wanna show)
* ## functions
* - pure function get-half-stars()->bool : count the number of half stars ⛔
* - pure function get-whole-stars()->int : count the number of whole stars ⛔
* - pure function get-empty-stars()->int : count the number of empty stars ⛔
* - public function full() : star all 👍
* - public function clear() : no star 👍
* - public function add-one() : add one star 👍
* - public function add-half() : add half stars 👍
* ## callbacks
* - callback clicked(float,float) : get how many whole stars and half stars
* ============================================
*/

import {ROOT_STYLES} from "../../themes/index.slint";
import { HorizontalBox } from "std-widgets.slint";
import { Themes } from "../../use/index.slint";


enum Step {
    Helf,
    Whole
}

component star-icon inherits Image {
  in property <bool> no-theme : false;
  in property <Themes> theme;
  source: @image-url("./img/star_01.svg");
  height: ROOT-STYLES.sur-font.font-size;
  width: ROOT-STYLES.sur-font.font-size;
  
  states [
    primary when !no-theme && theme == Themes.Primary: {
      colorize : ROOT-STYLES.sur-theme-colors.primary.normal;
    } 
    success when !no-theme &&theme == Themes.Success: {
      colorize : ROOT-STYLES.sur-theme-colors.success.normal;
    }
    info when !no-theme &&theme == Themes.Info: {
      colorize : ROOT-STYLES.sur-theme-colors.info.normal;
    }
    warning when !no-theme &&theme == Themes.Warning: {
      colorize : ROOT-STYLES.sur-theme-colors.warning.normal;
    }
    error when !no-theme &&theme == Themes.Error: {
      colorize : ROOT-STYLES.sur-theme-colors.error.normal;
    }
    dark when !no-theme &&theme == Themes.Dark: {
      colorize : ROOT-STYLES.sur-theme-colors.dark.normal;
   }
  ]
}

export component Star inherits Rectangle{
  height: area.height;
  width: area.width;
  in property <bool> no-theme : false;
  in-out property <float> score : 5;
  in property <Themes> theme : Themes.Primary;
  in property <bool> disabled : false;
  in property <float> max-score : 5;
  pure function get-half-stars()->bool {
    //round score
    Math.round(score) - score > 0 ? true : false
  }
  pure function get-whole-stars()->int {
    Math.floor(score)
  }
  pure function get-empty-stars() -> int {
    Math.round(max-score - score)
  }
  public function add-half() {
    if(area.whole-stars-number == max-score){
      area.whole-stars-number = max-score;
      area.half-stars-number = 0;
      area.empty-stars-number = 0;
      return;
    }else {
      area.half-stars-number += 1;
      if(area.half-stars-number==1){
        area.empty-stars-number -= 1;
      }else{
        area.half-stars-number = 0;
        area.whole-stars-number += 1;
      }
     
      // 
    }
  }
  public function add-one() {
    if((area.whole-stars-number + area.half-stars-number) == max-score){
      area.whole-stars-number = max-score;
      area.half-stars-number = 0;
      area.empty-stars-number = 0;
      return;
    }else {
      area.whole-stars-number +=1;
      area.empty-stars-number -= 1;
    }
  }
  public function clear() {
    area.whole-stars-number = 0;
    area.half-stars-number = 0;
    area.empty-stars-number = max-score;
  }
  public function full() {
    area.whole-stars-number = max-score;
    area.half-stars-number = 0;
    area.empty-stars-number = 0;
  }
  callback clicked(float,float);
  area:=TouchArea {
    height: view.height;
    width:view.width ;
    mouse-cursor: pointer;
    private property <int> whole-stars-number : get-whole-stars();
    private property <int> half-stars-number : get-half-stars()?1:0;
    private property <int> empty-stars-number : get-empty-stars();
    //整数
    function count-whole-stars(x-pos:length,h-star-width:length)->int {
      Math.floor(x-pos / h-star-width)
    }
    //小数
    function count-half-stars(x-pos:length,h-star-width:length)->int {
      Math.round(x-pos / h-star-width - Math.floor(x-pos / h-star-width) )
    }
    clicked => {
      // star.width = ROOT-STYLES.sur-font.font-size
      // star-area = 3 * star.width / 2
      // half width = star.width * (3 * max-score + 1) / 4
      if(!disabled){
        if(self.mouse-x <= ROOT-STYLES.sur-font.font-size / 2){
          whole-stars-number = 0;
          half-stars-number = 0;
          empty-stars-number = max-score;
        }else{
          whole-stars-number = count-whole-stars(self.mouse-x,3*ROOT-STYLES.sur-font.font-size / 2);
          half-stars-number = count-half-stars(self.mouse-x,3*ROOT-STYLES.sur-font.font-size / 2);
          empty-stars-number = max-score - whole-stars-number - half-stars-number;
        }
        root.clicked(whole-stars-number , half-stars-number )
      }
      
    }
    
    view:= HorizontalBox { 
      height: ROOT-STYLES.sur-font.font-size;
      spacing: ROOT-STYLES.sur-font.font-size / 2;
      width: ROOT-STYLES.sur-font.font-size * (3 * max-score + 1) / 2 ;
      padding-left: ROOT-STYLES.sur-font.font-size / 2;
      padding-right: ROOT-STYLES.sur-font.font-size / 2;
      padding-top: 0;
      padding-bottom: 0;
      vertical-stretch: 1;
      for w-star[index] in whole-stars-number:w-star-icon:= star-icon{
        theme: root.theme;
        source: @image-url("./img/star_02.svg");
        no-theme: root.no-theme;
      }
      if half-stars-number==1: h-star-icon:= star-icon{
        theme: root.theme;
        source: @image-url("./img/star_03.svg");
        no-theme: root.no-theme;
      }
      for e-star[index] in empty-stars-number:e-star-icon:= star-icon{
        theme: root.theme;
        source: @image-url("./img/star_01.svg");
        no-theme: root.no-theme;
      }
    }
  }
  
}

